<template>
  <ul>
    <li @click="handleDel(index)" v-for="(item, index) in arr" :key="item">
      {{ item }}
    </li>
  </ul>
</template>
<script>
export default {
  setup() {
    // !#1 定义数据
    const arr = ['a', 'b', 'c']
    const handleDel = (index) => {
      // console.log(1)
      // !#3 删除数据
      // ?问题：数据确确实实可以删掉，但是视图没有更新（不是响应式的）
      arr.splice(index, 1)
      console.log(arr)
    }
    // !#2 记得返回才能在模板中使用
    return {
      arr,
      handleDel,
    }
  },
}
</script>
